<template>
  <div>
      <div class="tab_byns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
      </div>

      <div class="tab_content">          
          <el-table
      :data="interfaces"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
       <el-table-column
        prop="url"
        label="url"
        width="180">
      </el-table-column>
      <el-table-column
        prop="limitTimes"
        label="调用限制次数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="moduleId"
        label="所属模型ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="用户ID">        
      </el-table-column>

       <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
      </div>
  </div>
</template>

<script>
import {del, get} from "@/utils/request"
export default {
    //定义变量，在模板中直接用
    data(){
        return {
            interfaces:[],
            visible:false
        }
    },
    
    //定义事件处理函数、方法
    methods:{  
      // 删除函数
    deleteHandler(row){
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/interface/deleteById"
        del(url,{id:row.id}).then(resp =>{
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.loadInterfaces();
        })
      })
    },
    // 修改函数
    editHandler(row){
      this.$router.push({ 
        path:"/lilu/interfaceform" ,
        query:row
      })
    }, 
      toFormHandler(){
        // 跳转
        this.$router.push({ path:"/lilu/interfaceform" })
      },
        //查询所有数据
        loadInterfaces(){      
            let url = "http://localhost:8888/interface/query"
            get(url).then(resp => {
                //获取数据后做的事情
                this.interfaces = resp.data;
                // console.log(this.interfaces);
            })
        }
    },
    //生命周期钩子函数
    created(){
       this.loadInterfaces();
    }
}
</script>

<style lang="sass" scoped>

</style>
